<template>
    <div class="bidding_customized">
        <section class="top">
            <div class="bc_title">招标类个性化定制</div>
            <div class="bc_box">
                <div class="title">
                    <span>个性定制 01</span>
                    <span class="sel_span">个性定制 02</span>
                    <span class="add">+</span>
                </div>
                <div class="search_box">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="活动名称">
                            <el-input v-model="form.name" placeholder="窗帘 工程 工程 工程 工程 工程 工程 工程 工程 工程 工程 工程 工程 工程 工程 工程 工程 工程 工程 工程 工程 "></el-input>
                        </el-form-item>
                        <div class="inline_box">
                            <el-form-item label="地区">
                                <el-select v-model="form.region" placeholder="全国">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>                            
                            <el-form-item label="公告类型">
                                <el-select v-model="form.region" placeholder="招标公告">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>                            
                            <el-form-item label="搜索类型 :">
                                <el-select v-model="form.region" placeholder="全文">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="搜索条件 :">
                                <el-select v-model="form.region" placeholder="精准">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="single_item">
                            <el-form-item label="提醒" >
                                <el-select v-model="form.region" placeholder="拟在建">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
                <div class="note">
                    <el-input
                    type="textarea"
                    :rows="3"
                    placeholder="关键词 : 厨房设备 餐饮设备 食堂设备 炊事机具 餐厅设备 厨具 地区 : 全国"
                    v-model="textarea">
                    </el-input>
                    <div class="btns">
                        <span class="sel">保存</span>
                        <span>删除</span>
                    </div>
                </div>
            </div>
        </section>

        <section class="table">
            <el-table
                :data="tableData"
                stripe
                size="mini"
                border
                style="width: 100%">
                <el-table-column
                    prop="type"
                    label="类型"
                    width="80">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="公告标题">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="地区"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="date"
                    label="时间"
                    width="100">
                </el-table-column>
            </el-table>
            <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="100"
            layout="prev, pager, next, jumper"
            :total="1000">
            </el-pagination>
        </section>
    </div>
</template>

<script>
import AccountCard from "../account/components/AccountCard"
import {getRegionArea} from "@/api/api"

  export default {
    name: "",
    components: {
      AccountCard,
    },
    data() {
      return {
        form: {
          name: '',
          region: '',
        },
        textarea: '',
        tableData: [{
            type:'招标公告',
            date: '2016-05-02',
            name: '环保-出灰嘴-询价公告',
            address: '内蒙古-呼和浩特'
            }, {
            type:'招标公告',
            date: '2016-05-04',
            name: '北苑学生宿舍18号楼（15、16号楼改扩建）工程设计项目(20C00758)竞争性磋 商公告北苑学生宿舍18号楼',
            address: '内蒙古-呼和浩特'
            }, {
            type:'项目信息',
            date: '2016-05-01',
            name: '光大绿色环保危废处置（临沭）有限公司取样栈台改造工程询价',
            address: '内蒙古-呼和浩特'
            }, {
            type:'项目信息',
            date: '2016-05-03',
            name: '北苑学生宿舍18号楼（15、16号楼改扩建）工程设计项目(20C00758)竞争性磋 商公告北苑学生宿舍18号楼（15、16号',
            address: '内蒙古-呼和浩特'
            }],
            currentPage: 1
        }
    },
    computed: {
      
    },
    beforeDestroy() {
    },
    async mounted() {
        this.tableData
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
  }
</script>

<style  lang="scss">
.el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #2D80B4;
        color: #FFF;
        }
        .el-pagination.is-background .el-pager li.active {
        color: #fff;
        cursor: default;
        }
        .el-pagination.is-background .el-pager li:hover {
        color: #2D80B4;
        }
        .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2D80B4;
        }
        .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        background-color: #2D80B4;
        color: #FFF;
    }
</style>

<style scoped lang="scss">
  .bidding_customized{
    .top{
        position: relative;
       height: 424px; 
       box-shadow: 0px 1px 3px 0px rgba(73, 73, 73, 0.3);
       margin-bottom: 12px;
    }
    .bc_title{
        height: 46px;
        line-height: 46px;
        font-weight: 400;
        background: #EEEEEE;
        font-size: 14px;
        color: #333333;
        padding-left: 9px;
    }
    .bc_box{
        margin: 23px 10px 15px 10px;
        .title{
            border-bottom: 1px solid #CBCBCB;
            span{
                display: inline-block;
                font-size: 14px;
                color: #ffffff;
                width: 106px;
                text-align: center;
                height: 25px;
                line-height: 25px;
                background: #2D80B4;                
                border-radius: 4px 4px 0px 0px;
                margin-right: 1px;

            }
            .sel_span{
                box-shadow: 2px 1px 3px 0px rgba(122, 122, 122, 0.57);
            }
            .add{
                width: 35px;
                text-align: center;
                height: 23px;
                line-height: 23px;
                background: #FFFFFF;
                box-shadow: 2px 1px 3px 0px rgba(122, 122, 122, 0.57);
                border-radius: 4px 4px 0px 0px;
                color: #000;
                font-weight: bold;
            }
        }
    }
    .search_box{
        border-bottom: 1px dashed #CBCBCB;
        margin-top: 20px;
        .single_item{
            .el-select{width: 90px;}
        }
        .inline_box{
            .el-form-item{
                display: inline-block;
                margin-right: 5px;
            }
            .el-select{width: 90px;}
        }
    }
    .note{
        margin-top: 20px;
        .btns{
            position: absolute;
            bottom: 15px;
            right: 9px;
            span{
                display: inline-block;
                font-size: 14px;
                color: #333333;
                width: 65px;
                height: 25px;
                text-align: center;
                line-height: 25px;
                border-radius: 4px;
                background: #DFDFDF;
                margin-left: 17px;
            }
            .sel{
                color: #ffffff;
                background: #2D80B4;
            }
        }
    }
    .el-pagination{
        margin-top: 60px;
        text-align: right;
    }
  }
</style>